import { useLoad } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import IconFont from '@/assets/Iconfont';
import cssModule from './index.module.scss';
import { getUserVipInfo } from '@/business/services/user/userInfo';
import { useEffect, useState } from 'react';
import { daysUntil } from '@/utils/calc';
import { useUserStore } from '@/business/store/user/login';

/**
 * @description vip开通组件
 * @author Shawn
 */

interface DefaultPageProps {
  defaultName?: string; // 默认文案
  btnName?: string; // 按钮文案
  isShowBtn?: boolean; // 是否显示按钮
  clickBtn?: () => void; // 点击按钮的回调
}

export default function Activation({
  defaultName = '非豹子号用户',
  btnName = '去开通',
  isShowBtn = true,
  clickBtn,
}: DefaultPageProps) {

  const [day, setDay] = useState(0)

  const useUser = useUserStore();


  useLoad(() => {
    console.log('Activation Page loaded.');
    // getRemainDays()
  });

  useEffect(() => {
    console.log('Activation Page loaded.');
    getRemainDays()
  }, [])

  const getRemainDays = async () => {
    const res = await getUserVipInfo()
    const day = daysUntil(res.data?.endTime)
    console.log(day, '剩余天数')
    if (day > 0) {
      setDay(day)
      useUserStore.getState().setvipRemainDays(day)
    }
  }

  return (
    <View className={cssModule.container}>
      <View className={cssModule.leftBox}>
        <View className={cssModule.userBox}>
          <IconFont name='user' size={36} />
          <Text className={cssModule.userName}>{defaultName}</Text>
        </View>
        <Text className={cssModule.remaining}>
          访问时间仅剩 <Text className={cssModule.date}>{day}</Text> 天，您可开通VIP解锁更多权限
        </Text>
      </View>
      {isShowBtn && clickBtn && (
        <View className={cssModule.activationBtn} onClick={clickBtn}>
          <Text>{btnName}</Text>
        </View>
      )}
    </View>
  );
}
